<template>
  <el-dialog title="详情" :close-on-click-modal="false" :visible.sync="visible">
    <el-form
      :model="dataForm"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <table style="width: 100%">
        <tr>
          <th rowspan="6" style="width: 120px;">
            <img
              v-if="dataForm.head_photo"
              :src="dataForm.head_photo"
              style="width: 80px; height: 80px"
            />
            <div v-else style="width: 80px; height: 80px;"></div>
            <div>{{ dataForm.mobile }}</div>
            <div
              v-for="(item, index) in dataForm.merchantInternetCelebrity"
              :key="index"
            >
              <span>{{ item }}</span>
            </div>
            <div>{{ dataForm.invitation_code }}</div>
          </th>
          <th>手机号</th>
          <th>{{ dataForm.mobile }}</th>
          <th>真实姓名</th>
          <th>{{ dataForm.real_name }}</th>
        </tr>
        <tr>
          <th>昵称</th>
          <th>{{ dataForm.nickname }}</th>
          <!-- <th>个性签名</th>
          <th>{{dataForm.resume}}</th> -->
          <th>邀请人</th>
          <th>{{ dataForm.invited }}</th>
        </tr>
        <tr>
          <th>性别</th>
          <th v-if="dataForm.gender == 1">男</th>
          <th v-if="dataForm.gender == 0">女</th>
          <th v-if="dataForm.gender == 2">保密</th>
          <th>注册时间</th>
          <th>{{ dataForm.register_time }}</th>
        </tr>
        <tr>
          <th>生日</th>
          <th>{{ dataForm.birthday }}</th>
          <th>用户来源</th>
          <th>
            {{ dataForm.register_source == 0 ? 'App注册' : '小程序注册' }}
          </th>
        </tr>
        <tr>
          <th>会员身份</th>
          <th>
            <div
              v-for="(v, i) in provinceArr"
              :key="i"
              v-if="v.value == dataForm.grade"
            >
              {{ v.label }}
            </div>
          </th>
          <th>会员地区</th>
          <th style="maxWidth:200px">
            <div v-for="(v, i) in dataForm.user_service_area_list" :key="i">
              {{ v.province_name }}{{ v.city_name }}{{ v.area_name
              }}{{ v.street_name }}{{ v.community_name }}
            </div>
          </th>
        </tr>
      </table>

      <div class="mt30">
        <div class="bold">商品订单信息</div>
        <table style="width: 100%">
          <tr>
            <th>消费金额</th>
            <th>订单数量</th>
            <th>退款金额</th>
            <th>评价</th>
            <th>售后记录</th>
          </tr>
          <tr>
            <th>￥{{ orderStatistics.user_order_slim_statistics.monetary }}</th>
            <th>{{ orderStatistics.user_order_slim_statistics.num }}</th>
            <th>
              ￥{{ orderStatistics.user_order_rights_slim_statistics.money }}
            </th>
            <th>{{ orderStatistics.goods_evaluate_num }}</th>
            <th>{{ orderStatistics.user_order_rights_slim_statistics.num }}</th>
          </tr>
        </table>
      </div>

      <!--     <div class="mt30">
        <div>服务订单信息</div>
          <table style="width: 100%">
          <tr>
            <th >消费金额</th>
            <th >订单数量</th>
            <th >退款金额</th>
            <th >评价</th>
            <th >售后记录</th>
            </tr>
            <tr>
              <th>￥{{orderStatistics.user_order_slim_statistics.monetary}}</th>
              <th >{{orderStatistics.user_order_slim_statistics.num}}</th>
              <th >￥{{orderStatistics.user_order_rights_slim_statistics.money}}</th>
              <th >{{orderStatistics.goods_evaluate_num}}</th>
              <th >{{orderStatistics.user_order_rights_slim_statistics.num}}</th>
              </tr>
            </table>
      </div> -->
      <div class="mt30">
        <div class="bold">下级用户</div>
        <el-table :data="dataForm.account_down_vos" border style="width: 100%">
          <el-table-column prop="id" label="序号" width="180">
          </el-table-column>
          <el-table-column prop="nickname" label="用户昵称" width="180">
          </el-table-column>
          <el-table-column prop="mobile" label="用户手机号"> </el-table-column>
          <el-table-column label="会员身份">
            <template slot-scope="{ row }">
              <div
                v-for="(v, i) in provinceArr"
                :key="i"
                v-if="v.value == row.grade"
              >
                {{ v.label }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="register_time" label="绑定时间">
          </el-table-column>
        </el-table>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import { treeDataTranslate } from '@/utils'
import seviceApi from '@/api/serviceApi.js'
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        id: '0'
      },
      orderStatistics: {
        user_order_slim_statistics: {
          monetary: '',
          num: ''
        },
        user_order_rights_slim_statistics: {
          money: '',
          num: ''
        },
        goods_evaluate_num: ''
      },
      tableData: [],
      provinceArr: [
        { label: '普通会员', value: 0 },
        { label: '团长', value: 1 }
        // { label: '爱心小屋', value: 2 },
        // { label: '服务驿站', value: 3 },
        // { label: '服务中心', value: 4 },
        // { label: '市级', value: 5 },
        // { label: '省级公司', value: 6 },
        // { label: '大区公司', value: 7 }
      ]
    }
  },

  methods: {
    init(id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
      })
      // 获取订单统计
      seviceApi.getConsumeStatistics(id).then(res => {
        if (res && res.data.code == 200) {
          this.orderStatistics.user_order_slim_statistics.monetary =
            res.data.data.user_order_slim_statistics.monetary
          this.orderStatistics.user_order_slim_statistics.num =
            res.data.data.user_order_slim_statistics.num
          this.orderStatistics.user_order_rights_slim_statistics.money =
            res.data.data.user_order_rights_slim_statistics.money
          this.orderStatistics.goods_evaluate_num =
            res.data.data.goods_evaluate_num
          this.orderStatistics.user_order_rights_slim_statistics.num =
            res.data.data.user_order_rights_slim_statistics.num
        }
      })
      if (id != 0) {
        seviceApi.getAccountInfo(id).then(res => {
          if (res && res.data.code == 200) {
            let merchantInternetCelebrity = []
            if (res.data.data.role_list != null) {
              if (res.data.data.role_list.length == 1) {
                if (res.data.data.role_list[0] == 0) {
                  merchantInternetCelebrity = ['商家']
                } else {
                  merchantInternetCelebrity = ['网红']
                }
              } else if (res.data.data.role_list.length == 2) {
                merchantInternetCelebrity = ['网红', '商家']
              }
            }
            res.data.data.merchantInternetCelebrity = merchantInternetCelebrity
            this.dataForm = res.data.data
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
table {
  border-collapse: collapse;
  border-spacing: 0;
  border-left: 1px solid #cccccc;
  border-top: 1px solid #cccccc;
}
th {
  border-right: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 5px 15px;
}
.mt30 {
  margin-top: 30px;
}
.wt150 {
  width: 150px;
}
.wt400 {
  width: 400px;
}
.text-right {
  text-align: right;
}
</style>
